<template>
  <div class="orderComm">
    <div class="header">
      <div class="wrapper clearfix">
        <a class="logo" @click="$router.push('/')"></a>
        <a @click="$router.push('/')" class="index">首页</a>
      </div>
    </div>
    <!--头部-->
    <!---->
    <div class="wrapper clearfix contain">

      <ul class="left-bar shadow">
        <li class="item-name">
          <a href="javascript:;" style="cursor:default;">
            <i class="item-icon icon1"></i>
            订单中心 </a>
          <ul class="item-branch">
            <li>
              <a href="javascript:;" class="selected">
                我的订单 </a>
            </li>
          </ul>
        </li>
      </ul>
      </li>
      </ul>
      <div class="right-content order-section">
        <div class="self-detail shadow">
          <div class="order-block">
            <ul class="order-tab clearfix">
              <li><a href="javascript:;" style="cursor: default;" class="selected">商城订单</a></li>
            </ul>
          </div>
          <ul class="classify clearfix" id="icon-select-ul">
            <li @click="handleGetOrderList(1, true)">
              <a href="javascript:;" data-order-status="2" data-status-name="等待买家付款">
                <span :class="status == 1 ? 'active ': 'icon1'">
                  待付款<em class="span"> ({{ shopList | List(1)}})</em>
                </span>
                <i :class="status == 1 ? 'icon1 current ': 'icon1'"></i>
              </a>
            </li>
            <li @click="handleGetOrderList(2, true)">
              <a href="javascript:;" data-order-status="3" data-status-name="等待卖家发货">
                <span :class="status == 2 ? 'active ': 'icon1'">
                  待发货<em class="span"> ({{ shopList | List(2)}})</em>
                </span>
                <i :class="status == 2 ? 'icon2 current ': 'icon2'"></i>
              </a>
            </li>
            <li @click="handleGetOrderList(3, true)">
              <a href="javascript:;" data-order-status="4" data-status-name="卖家已发货">
                <span :class="status == 3 ? 'active ': 'icon1'">
                  待收货<em class="span"> ({{ shopList | List(3)}})</em>
                </span>
                <i :class="status == 3 ? 'icon3 current ': 'icon3'"></i>
              </a>
            </li>
            <li @click="handleGetOrderList(6, true)">
              <a href="javascript:;">
                <span :class="status == 6 ? 'active ': 'icon1'">退款/退货<em class="span"> ({{ shopList | List(6)}})</em></span><i
                  class="icon5"></i>
              </a>
            </li>
          </ul>

          <table class="order-title order-table">
            <tbody>
              <tr>
                <td class="cell1">商品信息</td>
                <td class="cell2">单价（元）</td>
                <td class="cell3">数量</td>
                <td class="cell5">实付款（元）</td>
                <td class="cell6 status">
                  <span>全部状态<i id="order-status-select-icon-i"></i></span>
                  <ul class="status-tab">
                    <li :class="status == 0 ? 'active ': 'icon1'" @click="handleGetOrderList(0, true)">全部状态</li>
                    <li :class="status == 1 ? 'active': 'icon1'" @click="handleGetOrderList(1, true)">待付款</li>
                    <li :class="status == 2 ? 'active': 'icon1'" @click="handleGetOrderList(2, true)">待发货</li>
                    <li :class="status == 3 ? 'active': 'icon1'" @click="handleGetOrderList(3, true)">待收货</li>
                    <li :class="status == 6 ? 'active': 'icon1'" @click="handleGetOrderList(6, true)">退款/退货</li>
                  </ul>
                </td>
                <td class="cell7">操作</td>
              </tr>
            </tbody>
          </table>
          <div v-for="(item, index) in shopList" :key="index" v-if="shopList.length >0">
            <div class="addition clearfix" v-if="item.seller_info.seller_name == '易创天下'">
              <p class="message"><span class="gray">订单号：</span>{{item.order_number}}</p>
              <p class="message time"><span class="gray">下单时间：</span>{{item.order_time | formatDate}}</p>
              <div class="message store">
                <span class="gray">店铺：</span>
                <span class="store-name"><img src='http://imgs.yictx.com//sellerLogo/20180428/6f558e3ed00f782f92d11bc3173f1c18.jpg' />{{item.seller_info.seller_name}}</span>
              </div>
            </div>
            <table class="order-content order-table" v-if="item.seller_info.seller_name == '易创天下'">
              <tbody>
                <tr v-for="(list, index) in item.order_goods" :key="index">
                  <td class="product-detail">
                    <div class="clearfix">
                      <a href="javascript:;" class="pic" @click="$router.push({path: '/orderDetail', query: {id: item.order_id}})">
                        <img :alt="list.goods_short_title" width='60' height='60' :src="imgUrl.img+list.goods_pic">
                      </a>
                      <div class="des">
                        <a href="javascript:;">{{list.goods_short_title}}</a>
                        <p>
                          <span>规格：</span>{{list.shopping_spec}} </p>
                      </div>
                      <div class="price">
                        ￥{{item.order_price}} </div>
                      <p class="num">x{{item.order_user_num}}</p>
                    </div>
                  </td>
                  <td class="cell5 order-money">
                    <p class="price">￥{{item.order_price}}</p>
                    <p class="free">
                      （含运费{{item.order_freight}}） </p>
                  </td>
                  <td class="cell6">
                    <!--
                  1未支付 2：已支付 3：待收货 4：订单完成，5已评价 6退款申请 7软删除 8 取消 9退款成功 11同意退货 12退货回寄中
                -->
                    <p class="gray" style="color:#808080" v-if='item.order_user_num == 1'>待支付</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 2'>待发货</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 3'>待收货</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 4'>订单完成</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 6'>退款申请</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 8'>取消</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 9'>退款成功</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 11'>同意退货</p>
                    <p class="gray" style="color:#808080" v-else-if='item.order_user_num == 12'>退货回寄中</p>

                  </td>
                  <td class="cell7">

                    <a href="javascript:;" @click="$router.push({path: '/orderDetail', query: {id: item.order_id}})">订单详情</a>
                    <p class="goPay" v-if='item.order_user_num == 1' @click="handleGoPay(item, list)">去支付</p>
                    <p class="goPay" v-if='item.order_user_num == 1' @click="handleOrderCancel(item.order_id)">取消</p>
                    <p class="goPay" v-if='item.order_user_num == 2' @click="handleOrderCancel22()">退款</p>
                    <p class="goPay" v-if='item.order_user_num == 3' @click="handleOrderCancel22()">退款</p>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
          <div v-if="shopList.length==0" style="padding: 50px;font-size: 14px;" key="noData">没有数据</div>
        </div>
      </div>
    </div>
        <el-dialog  class="d" title="提示" :visible.sync="dialogVisible" width="30%" >
     
      <img src="../image/shop.png" width="120" height="120"/>
       <p>可以扫一扫,在手机商城上面进行退款</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!---->
  </div>
</template>
<script>
  import {
    formatDate
  } from '@/utils/time';
  import * as API from '@/api/index'
  export default {
    name: 'order',
    data() {
      return {
        shopList: [],
        status: 1,
        address: [],
        dialogVisible: false
      }
    },
    created() {
      this.handleGetOrderList(0, true)
      this.getAddress()
    },
    filters: {
      formatDate(time) {
        return formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm');
      },
      List(val, i) {
        let arr = []
        val.forEach((item) => {
          item.order_goods.forEach((list, index) => {
            if (list.goods_type == 1 && item.order_user_num == i && list != undefined) {
              arr.push(list)
            }
          })
        })
        return arr.length
      }
    },
    methods: {
      async getAddress() {
        const data = {
          service: 'Pro.Order.GetAddress'
        }
        const res = await API.toIndex(data)
        if (res.ret === 200) {
          this.address = res.data
        } else {
          this.$message.error(res.msg);
        }
      },
      async handleOrderCancel(order_id) {
        const data = {
          service: 'Pro.Order.OrderCancel',
          order_id: order_id
        }
        const res = await API.toIndex(data);
        if (res.ret == 200) {
          this.$notify({
            title: '取消成功',
            message: res.msg,
            type: 'success'
          });
          this.handleGetOrderList(this.status, true)
        }
      },
      async handleOrderCancel22() {
              this.dialogVisible = true
      },
      handleGoPay(item, goods) {
        if (this.address.length > 0) {
          let len = {};
          len.shdz = this.address[0].user_address_id;
          len.shopid = goods.goods_id;
          len.stock_name = goods.shopping_spec;
          len.shopsl = goods.number;
          len.zffs = 'pay_type';
          len.shopname = goods.goods_short_title
          len.moeny = item.order_price
          localStorage.setItem('paylist', JSON.stringify(len));
          this.$router.push({
            path: '/pay',
            query: {
              id: item.order_id
            }
          })
        }

      },
      async handleGetOrderList(num, isCact) {
        this.status = num;
        const data = {
          service: 'Pro.Order.OrderList',
          page: 1,
          page_number: 100,
          status: num
        }
        const res = await API.toIndex(data);
        if (res.ret == 200) {
          this.shopList = isCact ? res.data.lists : [...this.shopList, ...res.data.lists];
        }
      }
    },
  }

</script>
<style scoped>
  .orderComm .wrapper {
    width: 1100px !important;
    margin: 0 auto;
  }

  .shadow {
    box-shadow: 1px 1px 5px #ddd;
  }

  .help_center {
    color: #666;
  }

  /*header*/
  .orderComm .header {
    height: 82px;
    background: #c40000;
    width: 100% !important;
    padding: 0;
  }

  .header .logo {
    float: left;
    width: 200px;
    height: 58px;
    margin: 22px 9px 0 0;
    background: url(../image/pc.png) no-repeat;
  }

  .header .index,
  .header .message {
    position: relative;
    float: left;
    height: 34px;
    line-height: 34px;
    display: block;
    font-size: 14px;
    color: #fff;
    margin: 26px 0 0 34px;
  }

  .header .message i {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    background: url(../image/allbgs.png) -1px -15px no-repeat;
    top: 2px;
    right: -12px;
    color: #c40000;
    line-height: 12px;
    text-align: center;
    font-size: 11px;
  }

  .contain {
    margin-top: 15px;
  }

  .left-bar {
    float: left;
    width: 132px;
    background: #fff;
    padding: 7px 0 13px 18px;
  }

  .left-bar .item-name {
    margin-top: 3px;
    font-size: 14px;
    line-height: 34px;
  }

  .left-bar .item-name a {
    color: #333;
    display: block;
    position: relative;
    padding-left: 20px;
  }

  .left-bar .item-name .selected {
    color: #c40000;
  }

  .left-bar .item-branch {
    font-size: 12px;
    line-height: 26px;
    margin-top: -2px;
  }

  .left-bar .item-branch em {
    color: #ff3333;
  }

  .left-bar .item-icon {
    cursor: pointer;
    position: absolute;
    display: block;
    background: url(../image/allbgs.png) no-repeat;
    left: 0;
    top: 10px;
    *top: 4px;
  }

  .left-bar .icon1 {
    background-position: 0 -145px;
    width: 11px;
    height: 15px;
  }

  .left-bar .icon2 {
    background-position: 0 -46px;
    width: 17px;
    height: 11px;
    top: 11px;
    *top: 5px;
  }

  .left-bar .icon3 {
    background-position: 0 -127px;
    width: 14px;
    height: 13px;
  }

  .left-bar .icon5 {
    background-position: 0 -91px;
    width: 15px;
    height: 15px;
  }

  .right-content {
    float: right;
    width: 935px;
  }

  .self-detail {
    height: 305px;
    border: 1px solid #e8e8e8;
    background: #fff;
    padding: 43px 15px 0 15px;
  }

  .self-detail a {
    display: block;
    color: #333;
  }


  .order-block {
    *position: relative;
    *z-index: 20;
  }

  /* 针对ie7 提高新增评价弹层层级 */
  .order-tab {
    border-bottom: 2px solid #ebebeb;
    margin-top: 43px;
  }

  .order-tab li {
    position: relative;
    z-index: 2;
    zoom: 1;
    float: left;
    font-size: 16px;
    line-height: 48px;
  }

  .order-tab a {
    padding: 0 24px 2px 24px;
    margin-bottom: -2px;
    text-decoration: none;
  }

  .order-tab .selected {
    color: #c40000;
    border-bottom: 2px solid #c40000;
    padding-bottom: 0;
  }

  .classify {
    margin-top: 42px;
  }

  .classify li {
    float: left;
    font-size: 12px;
    line-height: 18px;
    margin: 0 50px;
  }

  .classify a {
    width: 77px;
    color: #333;
    padding-top: 66px;
    text-align: center;
    position: relative;
  }

  .classify a:hover {
    text-decoration: underline;
  }

  .classify a i {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    background: url(../image/allbgs.png) no-repeat;
  }

  .classify .icon1 {
    background-position: 0 -543px;
    width: 56px;
    height: 53px;
    left: 0 !important;

  }

  .classify .icon1:hover,
  .icon1.current {
    background-position: 0 -656px;
  }

  .classify .icon2 {
    background-position: 0 -287px;
    top: 9px;
    width: 51px;
    height: 45px;
    margin-left: -25px;
  }

  .classify .icon2:hover,
  .icon2.current {
    background-position: 0 -336px;
  }

  .classify .icon3 {
    background-position: 0 -244px;
    top: 11px;
    width: 59px;
    height: 39px;
    margin-left: -30px;
  }

  .classify .icon3:hover,
  .icon3.current {
    background-position: 0 -202px;
  }


  .classify .icon5 {
    background-position: -1px -599px;
    top: 1px;
    width: 57px;
    height: 52px;
    margin-left: -29px;
  }

  .classify .icon5:hover,
  .icon5.current {
    background-position: 0 -489px;
  }



  .classify em,
    {
    font-style: normal;
    position: absolute;
    top: -3px;
    right: -23px;
    display: block;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    width: 16px;
    border-radius: 50%;
    background: url(../image/allbgs.png) -1px -108px no-repeat;
    color: #fff;
  }

  .classify span {
    position: relative;
  }

  /*鍟嗗煄璁㈠崟*/
  .order-section .self-detail {
    padding: 0 15px;
    height: auto;
  }

  .order-block .order-tab {
    margin-top: 14px;
  }

  .order-block .order-tab a {
    display: block;
  }

  .order-section .classify {
    margin: 42px 0 36px 0;
    display: flex;
    justify-content: center;
  }

  .order-block {
    position: relative;
  }

  /*鍟嗗煄璁㈠崟--涓嶅悓鐘舵??*/
  .order-table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    color: #333;
  }

  .order-title {
    position: relative;
    z-index: 100;
  }

  .order-title td {
    background: #f5f5f5;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .order-title .cell1 {
    padding-left: 20px;
    text-align: left;
  }

  .order-title .cell2 {
    width: 180px;
  }

  .order-title .cell3 {
    width: 70px;
  }

  .order-title .cell4 {
    width: 106px;
  }

  .order-table .cell5 {
    width: 124px;
    text-align: center;
  }

  .order-table .cell6 {
    width: 116px;
    text-align: center;
  }

  .order-table .cell7 {
    width: 107px;
    text-align: center;
  }

  .order-title .status {
    cursor: pointer;
    position: relative;
  }

  .order-title .status span {
    position: relative;
  }

  .order-title .status i {
    position: absolute;
    display: block;
    width: 11px;
    height: 6px;
    right: -16px;
    top: 4px;
    background: url(../image/allbgs.png) -53px -1px no-repeat;
  }

  .order-title .status i.down {
    background-position: -34px 0px
  }

  .order-table .cell6 .status-tab {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 116px;
    z-index: 2;
    background: #f5f5f5;
  }

  .order-table .cell6 .status-tab li {
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    color: #333;
  }

  .order-table .cell6 .status-tab li:hover {
    color: #3366cc;
  }

  .order-content {
    border: 1px solid #e6e6e6;
    vertical-align: top;
  }

  .order-content a {
    color: #3366cc;
  }

  .order-details-select-iconup {
    background-position: -2px -11px;
  }

  .order-content .suit-content {
    padding: 0 20px;
  }

  .order-content .suit-content li {
    font-size: 12px;
    line-height: 22px;
    padding: 5px 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .order-content .suit-content .no-border {
    border: 0 none;
  }

  .order-content .suit-name {
    color: #333;
  }

  .order-content .suit-detail {
    color: #999;
  }

  .order-content a:hover {
    color: #ff3333;
    text-decoration: underline;
  }

  .order-content td {
    vertical-align: top;
    padding: 20px 0 16px 0;
    background: #fff;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #e6e6e6;
  }

  .addition {
    margin-top: 14px;
    padding: 0 20px;
    height: 39px;
    line-height: 39px;
    background: #f7f7f7;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #e6e6e6;
  }

  .addition .message {
    float: left;
  }

  .addition .message .gray {
    color: #999;
  }

  .addition .time {
    margin-left: 52px;
  }

  .addition .store {
    margin-left: 87px;
  }

  .addition .store-name {
    position: relative;
    padding-left: 20px;
  }

  .addition .store-name img {
    position: absolute;
    top: -2px;
    left: 0;
    width: 19px;
    height: 19px;
    display: block;
  }

  .addition .order-cancel {
    float: right;
    margin-right: 8px;
    color: #3366cc;
  }

  .product-detail .pic {
    position: relative;
    float: left;
    margin: 0 10px 0 20px;
    display: block;
    border: 1px solid #e3e3e3;
    width: 80px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 0;
  }

  .product-detail .pic img {
    vertical-align: middle;
  }

  .product-detail .pic .tip-box,
  .product-detail .pic .tip-layer,
  .product-detail .pic .tip-word {
    position: absolute;
    left: 0;
    width: 100%;
    height: 22px;
  }

  .product-detail .pic .tip-box {
    bottom: 0;
  }

  .product-detail .pic .tip-layer {
    top: 0;
    background-color: #000;
    opacity: .7;
    filter: alpha(opacity=70);
  }

  .product-detail .pic .tip-word {
    top: 0;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-size: 12px;
  }

  .product-detail .des {
    float: left;
    width: 180px;
    line-height: 20px;
  }

  .product-detail .des p {
    margin-top: 23px;
  }

  .product-detail .price {
    float: left;
    width: 200px;
    text-align: center;
    margin-left: 13px;
    font-size: 14px;
  }

  .product-detail .num {
    float: left;
    width: 35px;
    text-align: center;
    font-size: 14px;
  }

  .product-detail .refund {
    float: left;
    width: 96px;
    text-align: center;
  }

  .order-content .cell2 {
    width: 124px;
  }

  .order-money .price {
    font-size: 14px;
    line-height: 18px;
  }

  .order-money .free {
    line-height: 32px;
    color: #999;
  }

  .order-money .sales {
    margin: 0 0 8px;
    padding: 0 4px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #e02e2d;
    display: inline-block;
    *zoom: 1;
  }

  .order-section .page {
    text-align: left;
    margin-left: -2px;
    padding: 15px 0 30px 0;
  }

  .group-content {
    margin-bottom: 39px;
  }

  .group-content td {
    padding: 20px 0;
    vertical-align: middle;
  }

  .group-content .order-money p {
    line-height: 14px;
  }

  .group-content .other {
    margin-top: 10px;
    color: #999;
  }

  .group-content .status {
    line-height: 27px;
  }

  .order-content .pay-btn {
    display: inline-block;
    *zoom: 1;
    padding: 0 8px;
    color: #fff;
    background: #ff3333;
    border-radius: 2px;
    height: 24px;
    line-height: 24px;
  }

  .order-content .pay-btn:hover {
    color: #fff;
    text-decoration: none;
    background: #e70000;
  }

  .group-content .cancle-btn {
    color: #999;
    line-height: 26px;
    display: block;
    width: 30px;
    margin: 0 auto;
  }

  .group-content .cancle-btn:hover {
    color: #999;
    text-decoration: none;
  }

  .addition .group-time {
    margin-left: 82px;
  }

  .addition .way {
    margin-left: 77px;
  }

  .active {
    color: #F18690 !important;
  }

  .active .span {
    font-size: 18px;
  }

  /* 去支付 */
  .goPay {
    padding: 10px 0;
    cursor: pointer;
  }

</style>
